<template>
  <div class="individuationReadTest">
    <Header :isGoBack="false">
      <template v-slot:right>
        <div class="btn" @click="goStudyIndex">返回首页</div>
      </template>
    </Header>
    <el-card class="card" shadow="never">
      <div class="individuationReadTest-top">
        <div>
          <el-select
            v-model="gradeId"
            @change="changeGradeId"
            placeholder="请选择年级"
            style="margin-right: 10px;"
          >
            <el-option
              v-for="item in gradeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-select
            v-if="groupIdOptions.length"
            v-model="groupId"
            @change="changegroupId"
            placeholder="请选择分组"
          >
            <el-option
              v-for="item in groupIdOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <span v-if="tableData && tableData.length">
          <el-button
            v-if="!inShowSucssesAnswer"
            type="text"
            style="margin-right: 20px;"
            @click="submitAnswer"
            >提交答案</el-button
          >
          <el-button
            v-else
            type="text"
            style="margin-right: 20px;"
            @click="toLead"
            >导入</el-button
          >
          <el-button type="text" v-if="!inShowSucssesAnswer" @click="printTest"
            >打印</el-button
          >
          <el-button type="text" v-else @click="goTestCenter"
            >实战练习</el-button
          >
        </span>
      </div>
      <!-- <el-table border ref="multipleTable" :data="tableData" tooltip-effect="dark" show-summary
                style="width: 750px;margin: 0 auto;" :summary-method="getSummaries" max-height="550"
                @selection-change="handleSelectionChange"> -->
      <el-table
        class="table"
        v-if="flag"
        border
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        v-loading="!flag"
        style="margin: 0 auto;"
        max-height="550"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          v-if="inShowSucssesAnswer"
          type="selection"
          label="全选"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column label="单词">
          <template slot-scope="scope">
            <span
              style="display: block; text-indent: 1em;"
              v-if="scope.row.status == 0"
            >
              {{ scope.row.name }}</span
            >
            <el-input
              @change="answerHandle(scope.$index, scope.row)"
              style="width: 80%;"
              class="inputDeep"
              v-else
              v-model="scope.row.answer"
              placeholder="请输入答案"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="词义" show-overflow-tooltip>
          <template slot-scope="scope">
            <span
              style="display: block; text-indent: 1em;"
              v-if="scope.row.status == 1"
              >{{ scope.row.paraphrase }}</span
            >
            <el-input
              @change="answerHandle(scope.$index, scope.row)"
              style="width: 80%;"
              class="inputDeep"
              v-else
              v-model="scope.row.answer"
              placeholder="请输入答案"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          v-if="inShowSucssesAnswer"
          width="200"
          label="正确答案"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span :class="scope.row.isSucsses == true ? 'sucsses' : 'error'">
              {{
                scope.row.status == 0 ? scope.row.paraphrase : scope.row.name
              }}
            </span>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <!-- <span @click="nextGroup">下一组</span> -->
        <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page.sync="defaultListQuery.currentPage" :page-size="defaultListQuery.pageSize"
                    layout="prev, pager, next, jumper" :total="total">
                </el-pagination> -->
      </div>
    </el-card>
  </div>
</template>

<script>
import Header from "@/components/Header";
import {
  getGradeList,
  getWordList,
  addStudentWord,
  getGroupList,
} from "@/api/individuationRead.js";
const defaultListQuery = {
  currentPage: 1,
  pageSize: 100,
};
export default {
  name: "EnglishWebIndex",
  components: { Header },
  data() {
    return {
      flag: true,
      gradeId: "",
      gradeOptions: [],
      groupIdOptions: [],
      tableData: [],
      multipleSelection: [],
      inShowSucssesAnswer: false,
      defaultListQuery: Object.assign({}, defaultListQuery),
      total: 1000,
      bookData: null,
      groupId: "", //每组单词的id
    };
  },
  computed: {
    groupName() {
      const groupName = this.groupIdOptions.filter(
        (item) => item.id == this.groupId
      )[0].name;
      return groupName;
    },
    gradeName() {
      const gradeName = this.gradeOptions.filter(
        (item) => item.id == this.gradeId
      )[0].name;
      return gradeName;
    },
  },
  mounted() {
    this.bookData = JSON.parse(localStorage.getItem("bookData"));
    this.getGradeList();
  },
  watch: {},
  methods: {
    // async getStudentWordList() {
    //     await getStudentWordList(this.defaultListQuery)
    // },
    async getGradeList() {
      let type = null;
      if (this.bookData.book_id == 585) type = 0;
      if (this.bookData.book_id == 586) type = 1;
      let { data } = await getGradeList({ type });
      this.gradeOptions = data;
      this.gradeId = this.gradeOptions[0].id;
      this.getWordList(this.gradeId);
    },
    async getWordList(gradeId) {
      this.groupId = "";
      let { data } = await getWordList({ gradeId });
      const res = await getGroupList({ gradeId: this.gradeId });
      if (res.code == 200) {
        this.groupIdOptions = res.data;
      } else {
        this.groupIdOptions = [];
      }
      this.tableData = data.word_vo_list;
      this.groupId = data.group_id;
      this.initTableData();
    },
    initTableData() {
      if (!this.tableData) return;
      this.tableData.map((item) => {
        item.status = Math.random() > 0.5 ? 1 : 0;
        return item;
      });
    },
    goStudyIndex() {
      this.$router.push({
        name: "studyIndex",
      });
    },
    goTestCenter() {
      this.$router.push({
        name: "individuationReadCenter",
        query: {
          groupId: this.groupId,
        },
      });
    },
    async changeGradeId() {
      this.getWordList(this.gradeId);
      this.inShowSucssesAnswer = false;
    },
    async changegroupId() {
      // console.log(groupName,"groupName");
      let { data } = await getWordList({
        gradeId: this.gradeId,
        groupId: this.groupId,
      });
      this.tableData = data.word_vo_list;
      this.groupId = data.group_id;
      this.initTableData();
      this.inShowSucssesAnswer = false;
    },
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    // handleSizeChange(val) {
    //     console.log(`每页 ${val} 条`);
    // },
    // handleCurrentChange(val) {
    //     console.log(`当前页: ${val}`);
    // },
    answerHandle(index, row) {
      if (row.status == 1 && row.name == row.answer) {
        row.isSucsses = true;
      }
      if (
        row.status == 0 &&
        row.paraphrase.match(new RegExp(row.answer)) &&
        row.paraphrase.match(new RegExp(row.answer)).length
      ) {
        row.isSucsses = true;
      }
    },
    submitAnswer() {
      let unanswered = 0;
      let text = "";
      this.tableData.forEach((item) => {
        if (!item.answer) unanswered++;
      });
      if (unanswered == 0) {
        text = "您已完成所有题目,是否确定提交";
      } else {
        text = `您还有${unanswered}题未完成, 是否确定提交?`;
      }
      this.$confirm(`${text}`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(async () => {
          this.flag = false;
          this.inShowSucssesAnswer = true;
          await this.$nextTick();
          this.flag = true;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    async toLead() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          type: "info",
          message: "请选择导入单词",
        });
        return;
      }
      let data = this.multipleSelection
        .filter((item) => !item.library_id)
        .map((item) => item.id);
      console.log(data);
      if (data.length == 0) {
        this.$message({
          type: "info",
          message: "该单词已存在单词库中",
        });
        return;
      }
      await addStudentWord({
        wordIdList: data,
        groupId: this.groupId,
        gradeId: this.gradeId,
      });
      this.$message({
        type: "success",
        message: "导入成功!",
      });
      this.$confirm("导入单词库记忆中成功,是否前往单词库", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          // this.$message({
          //     type: 'success',
          //     message: '跳转成功!'
          // });
          this.$router.push({
            name: "wordBankCenter",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
      console.log(this.multipleSelection);
    },
    printTest() {
      this.$router.push({
        name: "printWord",
        query: {
          gradeName: this.gradeName,
          groupName: this.groupName,
          tableData: JSON.stringify(this.tableData),
        },
      });
      console.log("打印");
    },
    nextGroup() {
      this.getWordList(this.gradeId);
    },
  },
};
</script>

<style lang="scss" scoped>
.card {
  width: 1200px;
  margin: 20px auto;
}
.individuationReadTest {
  .sucsses {
    color: #67c23a;
  }

  .error {
    color: #f56c6c;
  }

  .individuationReadTest-top {
    margin: 20px auto 0;
    width: 1024px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .pagination {
    height: 50px;
    margin: 20px auto 0;
    width: 1024px;
    text-align: right;

    span {
      display: inline-block;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      border: 1px solid #dcdfe6;
      text-align: center;
      box-sizing: border-box;
      outline: none;
      margin: 0;
      transition: 0.1s;
      font-weight: 500;
      padding: 12px 20px;
      font-size: 14px;
      border-radius: 4px;
      color: #fff;
      background-color: #409eff;
      border-color: #409eff;
    }
  }
}
.table {
  width: 1024px;
}
/deep/ .inputDeep .el-input__inner {
  border: 0;
  // color: #999797;
  color: #EC7B32;
}

/deep/ .el-select .el-input__inner {
  height: 30px !important;
}

/deep/ .el-table__header .el-table-column--selection .cell .el-checkbox:after {
  content: "全选";
  margin-left: 10px;
}

// /deep/ .el-table__append-wrapper {
//     position: sticky;
//     bottom: 0;
// }

// 滚动条的宽度
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  position: absolute;
  right: 0;
  width: 6px; // 横向滚动条
  height: 6px; // 纵向滚动条 必写
}

/deep/ th,
/deep/ td {
  padding-left: 20px;
}

// 滚动条的滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}

/deep/ .el-table th.gutter {
  width: 6px !important;
}

/deep/ .el-table colgroup col[name="gutter"] {
  display: none;
  width: 0;
}

/deep/ .el-table__body {
  width: 100% !important;
}
</style>
